<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="540" width="350">

<!-- === definitions === -->

<style>
 :root { font: 14px sans-serif, Droid Sans Fallback; }
 .code { font-family: monospace; }
 .bit, rect, path { filter: url(#dropshadow); }
</style>

<filter id="dropshadow" height="130%">
  <fegaussianblur in="SourceAlpha" stdDeviation="3" /> <!-- stdDeviation is how much to blur -->
    <feoffset dx="2" dy="2" result="offsetblur" /> <!-- how much to offset -->
    <femerge> 
      <femergenode /> <!-- this contains the offset blurred image -->
      <femergenode in="SourceGraphic" /> <!-- this contains the element that the filter is applied to -->
   </femerge>
</filter>

<lineargradient y2="1" x2="0.5" y1="0" x1="0.5" gradientUnits="objectBoundingBox" id="grad">
  <stop stop-color="white" offset="5%" />
  <stop stop-color="rgba(144,238,144,0.5)" offset="95%" />
</lineargradient>

<!-- === graphic === -->

<polygon stroke="black" fill="url(#grad)" class="bit" points="40,10, 140,10, 110,60, 10,60" />
<text text-anchor="middle" x="75" y="35">Network</text>

<polyline stroke="black" points="75,60, 75,100" />
<polygon points="70,85, 80,85, 75,100" />

<rect stroke="black" fill="url(#grad)" height="50" width="100" x="25" y="100" />
<text text-anchor="middle" x="75" y="120">Byte Stream</text>
<text text-anchor="middle" x="75" y="135">Decoder</text>

<polyline stroke="black" points="75,150, 75,190" />
<polygon points="70,175,80,175,75,190" />

<rect stroke="black" fill="url(#grad)" height="50" width="100" x="25" y="190" />
<text text-anchor="middle" x="75" y="210">Input Stream</text>
<text text-anchor="middle" x="75" y="225">Preprocessor</text>

<polyline stroke="black" points="75,240, 75,280" />
<polygon points="70,265,80,265,75,280" />

<rect stroke="black" fill="url(#grad)" height="50" width="100" x="25" y="280" />
<text text-anchor="middle" x="75" y="305">Tokenizer</text>

<polyline stroke="black" points="75,330, 75,370" />
<polygon points="70,355, 80,355, 75,370" />

<rect stroke="black" fill="url(#grad)" height="50" width="100" x="25" y="370" />
<text text-anchor="middle" x="75" y="390">Tree</text>
<text text-anchor="middle" x="75" y="405">Construction</text>

<polyline stroke="black" points="75,420, 75,460" /> <!-- line down -->
<polygon points="70,445, 80,445, 75,460" />

<polyline stroke="black" points="125,395, 225,395" /> <!-- line right -->
<polygon points="210,390, 210,400, 225,395" />

<path stroke="black" fill="url(#grad)" d="M 25,520 L 25,460 L 125,460 L 125,510 C 70,510 80,530 25,520" />
<text text-anchor="middle" x="75" y="495">DOM</text>

<polyline stroke-dasharray="6" stroke="black" fill="transparent" points="125,490, 275,490, 275,420" />

<rect stroke="black" fill="url(#grad)" height="50" width="100" x="225" y="370" />
<text text-anchor="middle" x="275" y="390">Script</text>
<text text-anchor="middle" x="275" y="405">Execution</text>

<polyline stroke="black" points="275,370, 275,215, 125,215" fill="transparent" />
<polygon points="125,215, 135,210, 135,220" />
<text class="code" text-anchor="end" x="270" y="230">document.write()</text>

</svg>